<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="description" content="" />
        <title>安装程序 | Setup</title>
        <!-- Bootstrap core CSS -->
        <link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
        <style>
            .bd-placeholder-img {
                font-size: 1.125rem;
                text-anchor: middle;
                -webkit-user-select: none;
                -moz-user-select: none;
                user-select: none;
            }

            @media (min-width: 768px) {
                .bd-placeholder-img-lg {
                    font-size: 3.5rem;
                }
            }

            .container {
                max-width: 960px;
            }
        </style>
    </head>

    <body class="bg-light">
        <div class="container">
            <main>
                <div class="py-5 text-center">
                    <!--
                    <a href="https://github.com/ImJingLan/dictum"
                        ><img
                            class="d-block mx-auto mb-4"
                            src=""
                            alt=""
                            width="80"
                            height="80"
                    /></a>-->
                    <h2>安装程序 | Setup</h2>
                    <p class="lead">我们需要收集一些信息来进行安装</p>
                </div>
                <div id="forms" class="row g-6">
                    <div class="col-md-12 col-lg-12">
                        <h4 class="mb-3">数据库</h4>

                        <div class="row g-3">
                            <div>
                                <div class="col-12">
                                    <label for="dbHost" class="form-label">
                                        MySQL 地址
                                    </label>
                                    <div class="input-group has-validation">
                                        <input
                                            type="text"
                                            class="form-control"
                                            id="dbHost"
                                            value="localhost"
                                            required
                                        />
                                        <div class="invalid-feedback">
                                            你需要提供 MySQL 地址
                                        </div>
                                    </div>
                                    <small class="text-muted">
                                        通常为本地地址, 若您不清楚该项设置,
                                        请勿修改
                                    </small>
                                </div>
                                <div class="col-12">
                                    <label for="dbPort" class="form-label">
                                        MySQL 端口
                                    </label>
                                    <div class="input-group has-validation">
                                        <input
                                            type="text"
                                            class="form-control"
                                            id="dbPort"
                                            value="3306"
                                            required
                                        />
                                        <div class="invalid-feedback">
                                            你需要提供 MySQL 端口
                                        </div>
                                    </div>
                                    <small class="text-muted">
                                        通常为 3306 端口, 若您不清楚该项设置,
                                        请勿修改
                                    </small>
                                </div>
                                <div class="col-12">
                                    <label for="dbName" class="form-label">
                                        数据库名
                                    </label>
                                    <div class="input-group has-validation">
                                        <input
                                            type="text"
                                            class="form-control"
                                            id="dbName"
                                            value="actiCenter"
                                            required
                                        />
                                        <div class="invalid-feedback">
                                            你需要提供数据库名
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <label for="dbUsername" class="form-label">
                                        数据库用户名
                                    </label>
                                    <div class="input-group has-validation">
                                        <input
                                            type="text"
                                            class="form-control"
                                            id="dbUsername"
                                            value="actiCenter"
                                            required
                                        />
                                        <div class="invalid-feedback">
                                            你需要提供数据库用户名
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <label for="dbPassword" class="form-label">
                                        数据库密码
                                    </label>
                                    <div class="input-group has-validation">
                                        <input
                                            type="password"
                                            class="form-control"
                                            id="dbPassword"
                                            placeholder=""
                                            required
                                        />
                                        <div class="invalid-feedback">
                                            你需要提供数据库密码
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <label for="dbPrefix" class="form-label">
                                        数据库前缀
                                    </label>
                                    <div class="input-group has-validation">
                                        <input
                                            type="text"
                                            class="form-control"
                                            id="dbPrefix"
                                            value="act_"
                                            required
                                        />
                                        <div class="invalid-feedback">
                                            你需要提供数据库前缀
                                        </div>
                                    </div>
                                    <small class="text-muted">
                                        若您想在同一个数据库中安装多个站点则需要修改此项以防止表冲突
                                    </small>
                                </div>
                            </div>

                            <hr class="my-4" />

                            <h4 class="mb-3">站点信息</h4>
                            <div>
                                <div class="col-12">
                                    <label for="siteName" class="form-label">
                                        站点名称
                                    </label>
                                    <div class="input-group has-validation">
                                        <input
                                            type="text"
                                            class="form-control"
                                            id="siteName"
                                            value="Activity Center"
                                            required
                                        />
                                        <div class="invalid-feedback">
                                            你需要提供站点名称
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <label for="description" class="form-label">
                                        站点描述
                                    </label>
                                    <div class="input-group has-validation">
                                        <input
                                            type="text"
                                            class="form-control"
                                            id="siteDescription"
                                            value="Provide All Activities' Details"
                                            required
                                        />
                                        <div class="invalid-feedback">
                                            你需要提供站点描述
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <hr class="my-4" />

                            <h4 class="mb-3">管理员信息</h4>
                            <div>
                                <div class="col-12">
                                    <label for="username" class="form-label">
                                        管理员用户名
                                    </label>
                                    <div class="input-group has-validation">
                                        <input
                                            type="text"
                                            class="form-control"
                                            id="username"
                                            value="admin"
                                            required
                                        />
                                        <div class="invalid-feedback">
                                            你需要提供管理员用户名
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <label for="nickname" class="form-label">
                                        管理员昵称
                                    </label>
                                    <div class="input-group has-validation">
                                        <input
                                            type="text"
                                            class="form-control"
                                            id="nickname"
                                            value="Administrator"
                                            required
                                        />
                                        <div class="invalid-feedback">
                                            你需要提供管理员昵称
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <label for="password" class="form-label">
                                        管理员密码
                                    </label>
                                    <div class="input-group has-validation">
                                        <input
                                            type="password"
                                            class="form-control"
                                            id="password"
                                            placeholder=""
                                            required
                                        />
                                        <div class="invalid-feedback">
                                            你需要提供管理员密码
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <label
                                        for="confirmPassword"
                                        class="form-label"
                                    >
                                        确认密码
                                    </label>
                                    <div class="input-group has-validation">
                                        <input
                                            type="password"
                                            class="form-control"
                                            id="confirmPassword"
                                            placeholder=""
                                            required
                                        />
                                        <div class="invalid-feedback">
                                            你需要提供管理员密码
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <label for="email" class="form-label">
                                        管理员邮箱
                                    </label>
                                    <div class="input-group has-validation">
                                        <input
                                            type="text"
                                            class="form-control"
                                            id="email"
                                            required
                                        />
                                        <div class="invalid-feedback">
                                            你需要提供管理员邮箱
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <hr class="my-4" />
                            <small class="text-muted">
                                安装即表示你已阅读并<b>完全同意</b>
                                <a
                                    href="//github.com/imjinglan/imjinglan/dictum.md"
                                    >DICTUM 用户须知</a
                                >
                            </small>
                            <button
                                id="installButton"
                                class="w-100 btn btn-primary btn-lg"
                            >
                                安装
                            </button>
                        </div>
                    </div>
                </div>

                <div id="finish1" class="row g-6" style="display: none">
                    <div class="col-md-12 col-lg-12">
                        <h4 class="mb-3">
                            <span id="title1"></span>
                        </h4>
                        <p>
                            <span id="notice1"></span>
                        </p>
                    </div>
                </div>
            </main>
            <footer class="my-5 pt-5 text-muted text-center text-small">
                <p class="mb-1">
                    &copy; 2021–
                    <script>
                        document.write(new Date().getFullYear());
                    </script>
                    Dictum Team
                </p>
            </footer>
        </div>
        <script src="../assets/js/bootstrap.bundle.min.js"></script>
        <script>
            function isEmpty(value) {
                return (
                    value === null ||
                    value === undefined ||
                    (typeof value === "string" && value.trim().length === 0)
                );
            }

            var installButton = document.getElementById("installButton");
            var dbHost = document.getElementById("dbHost");
            var dbPort = document.getElementById("dbPort");
            var dbName = document.getElementById("dbName");
            var dbUsername = document.getElementById("dbUsername");
            var dbPassword = document.getElementById("dbPassword");

            var siteName = document.getElementById("siteName");
            var siteDescription = document.getElementById("siteDescription");

            var username = document.getElementById("username");
            var password = document.getElementById("password");
            var confirmPassword = document.getElementById("confirmPassword");
            var nickname = document.getElementById("nickname");
            var email = document.getElementById("email");

            function setup() {
                var data = {
                    dbHost: dbHost.value,
                    dbPort: parseInt(dbPort.value),
                    dbName: dbName.value,
                    dbUsername: dbUsername.value,
                    dbPassword: dbPassword.value,

                    siteName: siteName.value,
                    siteDescription: siteDescription.value,

                    username: username.value,
                    password: password.value,
                    confirmPassword: confirmPassword.value,
                    nickname: nickname.value,
                    email: email.value,
                };

                if (
                    password.value == confirmPassword.value &&
                    (!isEmpty(password.value) &&
                        !isEmpty(confirmPassword.value))
                ) {
                    fetch("install.php", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/x-www-form-urlencoded",
                        },

                        body: new URLSearchParams(data).toString(),
                    })
                        .then((response) => response.json())
                        .then((data) => {
                            console.log(data);
                        })
                        .catch((error) => {
                            alert("操作失败: " + error.message);
                        });
                } else {
                    alert("两次输入的密码不同或为空");
                }
            }
            installButton.addEventListener("click", setup);
        </script>
    </body>
</html>
